Event.observe ( window, 'load', bootstrap );

var button_ids = $w( 'refresh_page product specification datasheet' );

function bootstrap () {
  TableKit.options.editAjaxURI = '/rest/user';
  
  table_kit_select_input_as_boolean ( $w( 'authorization_owner authorization_writer authorization_follower' ) );
  
  Event.observe ( 'user',          'change', user_changed           ); /* ${ 'user' }.observe ( 'change', user_changed ) */
  Event.observe ( 'product',       'change', product_changed        );
  Event.observe ( 'specification', 'change', specification_changed  );
  Event.observe ( 'datasheet',     'change', datasheet_changed      );
  
  $( 'refresh_page' ).observe ( 'click', refresh_page );
  
  var parameter = window.location.search.toQueryParams ();
  
  if ( parameter['id'] ) {
    $( 'user' ).value = parameter['id'];
    
    refresh_page ();
  }
}

function refresh_page () {
  var user = $( 'user' ).value;
  
  if ( user != '' ) {
    new Ajax.Request ( '/rest/user/' + user, {
      method         : 'get',
      requestHeaders : { Accept : 'application/json' },
      onComplete     : function ( transport ) {
        $w( 'product specification datasheet' ).each ( function ( whatever ) {
          display_whateverz ( whatever, transport.responseJSON );
        } );
      }
    } );
  }
}

function whatever_changed ( whatever ) {
  var user   = $( 'user'   ).value;
  var valeur = $( whatever ).value;
  
  if ( user != '' && valeur != '' ) {
    new Ajax.Request ( '/rest/user/' + user + '/' + whatever + '/' + valeur, {
      method         : 'put',
      requestHeaders : { Accept : 'application/json' },
      onComplete     : function () {
        display_whateverz ( whatever );
        
        $( whatever ).setValue ( '' );
      }
    } );
  }
}

function product_changed       () { whatever_changed ( 'product'       ); }
function specification_changed () { whatever_changed ( 'specification' ); }
function datasheet_changed     () { whatever_changed ( 'datasheet'     ); }

function user_changed () {
  refresh_page ();
}

function display_whateverz ( whatever, response ) {
  var user = $( 'user' ).value;
  
  $$( 'select#' + whatever + ' option' ).each ( function ( node ) { node.style.display = '' } );
  
  if ( user != '' ) {
    if ( response ) {
      display_whateverz_callback ( whatever, response );
    }
    else {
      new Ajax.Request ( '/rest/user/' + user, {
        method         : 'get',
        requestHeaders : { Accept : 'application/json' },
        onComplete     : function ( transport ) {
          display_whateverz_callback ( whatever, transport.responseJSON );
        }
      } );
    }
  }
  else {
    $( whatever + 's_table' ).replace ( '<div id="' + whatever + 's_table"></div>' );

    button_ids.each ( function ( id ) { disable ( id ) } );
  }
}

function display_whateverz_callback ( whatever, response ) {
  var user           = $( 'user' ).value;
  var authorizations = response[whatever + 's'];
  
  if ( authorizations.length > 0 ) {
    if ( whatever == 'datasheet' && ( response.role.owns_all_datasheets || response.role.writes_all_datasheets ) ) {
      $( whatever + 's_table' ).replace (
        "<table id=\"" + whatever + "s_table\" class=\"" + whatever + "s\">\n"
      + "  <tbody>\n"
      + "    <tr><th>" + ( response.role.owns_all_datasheets ? "Owns" : "Writes" ) + " all datasheets!</th></td>\n"
      + "  </tbody>\n"
      + "</table>\n"
      );
      
      disable ( whatever );
    }
    else {
      $( whatever + 's_table' ).replace ( whateverz_table_html ( whatever, authorizations ) );

      TableKit.Sortable.init ( whatever + 's_table' );
      TableKit.reload ();

      button_ids.each ( function ( id ) { enable ( id ) } );
    }
  }
  else {
    $( whatever + 's_table' ).replace ( '<div id="' + whatever + 's_table"></div>' );
  }
}

function whateverz_table_html ( whatever, authorizations ) {
  var user = $( 'user' ).value;
  
  var html =
    "<table id=\"" + whatever + "s_table\" class=\"" + whatever + "s sortable editable\">\n"
  + "  <thead>\n"
  + "    <tr>\n"
  + "      <th id=\"" + whatever + "_id\"    class=\"noedit\">ID</th>\n"
  + "      <th id=\"authorization_owner\"    class=\"\"      >Owner</th>\n"
  + "      <th id=\"authorization_writer\"   class=\"\"      >Writer</th>\n"
  + "      <th id=\"authorization_follower\" class=\"\"      >Follower</th>\n"
  + "    </tr>\n"
  + "  </thead>\n"
  + "  <tfoot>\n"
  + "    <tr>\n"
  + "      <th                                               >ID</th>\n"
  + "      <th                                               >Owner</th>\n"
  + "      <th                                               >Writer</th>\n"
  + "      <th                                               >Follower</th>\n"
  + "    </tr>\n"
  + "  </tfoot>\n"
  + "  <tbody>\n"
  ;

  var i = 1;

  authorizations.each ( function ( h ) {
    html = html
    + "    <tr class=\"" + ( i % 2 ? "odd" : "even" ) + "\" id=\"user_id_" + user + "__" + whatever + "_id_" + h.id +"\">\n"
    + "      <td>" +   h.id                        + "</td>\n"
    + "      <td>" + ( h.owner    ? 'yes' : 'no' ) + "</td>\n"
    + "      <td>" + ( h.writer   ? 'yes' : 'no' ) + "</td>\n"
    + "      <td>" + ( h.follower ? 'yes' : 'no' ) + "</td>\n"
    + "    </tr>\n"
    ;

    $( h.id ).style.display = 'none';

    i = i + 1;
  } );

  html = html
  + "  </tbody>\n"
  + "</table>\n"
  ;
  
  return html;
}
